<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06.Vue的生命周期函数</title>
</head>
<body>
<div id="app">

    <span id="sp">{{ msg }}</span>

    <input type="button" @click="changeData" value="修改数据">

</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "百知教育"
        },
        methods: {
            changeData() {
                this.msg = Math.random();
            }
        },
        beforeCreate() { //1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性
            console.log("beforeCreate: " + this.msg);
        },
        created() { //2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
            console.log("created: " + this.msg);
        },
        beforeMount() {//3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译
            console.log("beforeMount: " + document.getElementById("sp").innerText);
        },
        mounted() {//4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
            console.log("Mounted: " + document.getElementById("sp").innerText);
        },
        beforeUpdate() {//5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据
            console.log("beforeUpdate:" + this.msg);
            console.log("beforeUpdate:" + document.getElementById("sp").innerText);
        },
        updated() {    //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化  页面中数据已经和data中数据一致
            console.log("updated:" + this.msg);
            console.log("updated:" + document.getElementById("sp").innerText);
        },
        beforeDestory() {//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁

        },
        destoryed() { //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁

        }

    });
</script>
</body>
</html>